<template>
  <div class="register">
    <van-form @submit="onSubmit" style="margin-top:20px">
  <van-field
    v-model="username"
    name="username"
    label="用户名"
    placeholder="用户名"
    :rules="[{ pattern, message: '请填写由11位数字组成的手机号' }]"
  />
  <van-field
    v-model="password"
    type="password"
    name="password"
    label="密码"
    placeholder="密码"
    :rules="[{ validator, message: '请填写由字母开头6-12位的密码' }]"
  />
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit">
      注册账号
    </van-button>
  </div>
</van-form>
  </div>
</template>

<script>
import Vue from 'vue'
import { Form, Field, Button, Dialog, Toast } from 'vant'
import { setRegister } from '@/API/register'

Vue.use(Form)
Vue.use(Field)
Vue.use(Button)
Vue.use(Dialog)
Vue.use(Toast)
export default {
  name: 'register-index',
  data () {
    return {
      username: '',
      password: '',
      pattern: /^1\d{10}$/
    }
  },
  methods: {
    onSubmit (values) {
      // console.log('submit', values)
      setRegister(values).then(res => {
        Toast.success('注册成功,即将跳转登录页')
        setTimeout(() => {
          this.$router.push('/login')
        }, 2000)
      })
        .catch(e => {
          Dialog.alert({
            title: e.meta.code,
            message: e.meta.msg
          })
        })
    },
    validator (val) {
      return /^[A-Za-z][A-Za-z0-9]{5,11}$/.test(val)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
